<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<style>
		* {
			margin: 0;
			padding: 0;
		}
		html {
			height: 100%;
		}
		body {
			height: 100%;
		}
		.container {
			height: 100%;
			background-image: linear-gradient(to right, #999999, #330867);
		}
		.login-wrapper {
			background-color: bisque;
			width: 358px;
			height: 588px;
			border-radius: 15px;
			padding: 0 50px;
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.header {
			font-size: 38px;
			font-weight: bold;
			text-align: center;
			line-height: 200px;
		}
		.input-item {
			display: block;
			width: 100%;
			margin-bottom: 20px;
			border: 0;
			padding: 10px;
			border-bottom: 1px solid rgb(128,125,125);
			font-size: 15px;
			outline: none;
		}
		.input-item::placeholder {
			text-transform: uppercase;
		}
		.btn {
			text-align: center;
			padding: 10px;
			width: 100%;
			margin-top: 40px;
			background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
			color: #fff;
		}
		.msg {
			text-align: center;
			line-height: 88px;
		}
		.user_error,.pwd_error{color:#f00;position:absolute;left:0;top:43px;display:none}
		a {
			text-decoration-line: none;
			color: #abc1ee;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="login-wrapper">
		<div class="header">Login</div>
<!--		<div class="form-wrapper">-->
<!--			<input type="text" name="username" placeholder="username" class="input-item">-->
<!--			<input type="password" name="password" placeholder="password" class="input-item">-->
<!--			<div class="btn">Login</div>-->
<!--		</div>-->

		<div class="login-wrapper">
			<form th:action="@{/toLogin}" method="post">
				<input type="text" name="userName" class="input-item" placeholder="请输入用户名">
				<div class="user_error">输入错误</div>
				<input type="password" name="pwd" class="input-item" placeholder="请输入密码">
				<div class="pwd_error">输入错误</div>
				<div class="more_input clearfix">
					<input type="checkbox" name="">
					<label>记住用户名</label>
					<a href="#">忘记密码</a>
				</div>
				<input type="submit" name="" value="登录" class="btn">
			</form>
		</div>

		<div class="msg">
			Don't have account?
			<a href="/register">Sign up</a>
		</div>
	</div>
</div>
</body>
</html>


